<template>
  <div class="home">
    <div class="home-2">
      <div class="home-3" v-if="loading === true" >
        <el-table :data="tableData"  style="width: 100%" :cell-style="{border:0 + 'px' }">
          <el-table-column  label="username" >
            <template #default="scope">
              <div class="home-4">
                {{ scope.row.username }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="level" />
          <el-table-column prop="area" label="area" style="width: 30%" >
            <template #default="scope">
              <div v-if="scope.row.is_choose_area == '1'">
                <div v-if="scope.row.area === '0'">left</div>
                <div v-if="scope.row.area === '1'">right</div>
              </div>
              <div v-if="scope.row.is_choose_area == '0'">
                <el-switch
                    v-model="scope.row.area"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    active-text="right"
                    inactive-text="left"
                    @change="hendleSwitchArea(scope.row)"
                    active-value="1"
                    inactive-value="0"
                    inline-prompt
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="width:100%;margin:5vw auto;">
          <el-pagination
              prev-text="pre paper"
              next-text="next paper"
              background
              layout="prev,pager, next"
              :total="queryPaper.total"
              @current-change="handleCurrentPage"
          />
        </div>
      </div>
      <div class="home-1" v-else>
        no more data~
      </div>



    </div>
  </div>

</template>

<script setup>
import {ref,reactive,onMounted,onBeforeMount} from 'vue';
import {onLoad,onShow} from "@dcloudio/uni-app";
import {getMyPush} from "@/api/zhitui";
import {getMyChooseArea} from "@/api/my"

let loading = ref(false);
let queryParams = ref({})
const tableData = ref([])
let queryPaper= reactive({
  page: 1,
  total:0
})

const getMyPushList = () =>{
  queryPaper = Object.assign(queryPaper,{})
  getMyPush(queryPaper).then(res=>{
    if(res.data.code === 200){
      loading.value = true;
      tableData.value = res.data.data.data;
      queryPaper.total = res.data.data.total;
    }else{
     uni.showToast({
       title: res.data.msg,
       icon: 'none',
       duration: 2000
     })
    }
  }).catch(error=>{

  })
}

const handleCurrentPage = (val)=>{
  queryPaper.page = val;
  getMyPushList();
}

const hendleSwitchArea = (row) =>{
  queryParams = Object.assign(queryParams,{
    area: row.area,
    wallet_addr: row.wallet_addr
  })
  getMyChooseArea(queryParams).then(res=>{
    if(res.data.code === 200){
      console.log(res)
      getMyPushList();
    }else{

    }
  })
}

onLoad(()=>{
  getMyPushList();
})
</script>


<style scoped>
.home-4{
  /*width: 20vw;*/
  /*height: 5vw;*/
  /*overflow: hidden; !* 隐藏超出的内容 *!*/
  /*text-overflow: ellipsis; !* 显示省略号 *!*/
  /*max-height: 5vw; !* 设置最大高度 *!*/
}
.home-3{

}
.home-2{
  scale: 0.9;
  background: #FFFFFF;
  height: auto;
  padding: 5% 0;
  box-sizing: border-box;
  border-radius: 5px;
}
.home-1{
  text-align: center;
  height: 50vh;
  line-height: 50vh;
  color: #A9A9A9;
}
.home{
  background-color: #EBEBEB;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  min-height: 100vh;
  overflow-y: scroll ;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
:deep(.btn-prev) {
  border: none;
  width:45%;
  margin-right: 5%;
  height: 30px;
}
:deep(.btn-next) {
  border: none;
  width: 45%;
  margin-left: 5%;
  height: 30px;
}
:deep( .el-table__inner-wrapper:before ){
  background: none !important;
  content: "";
  position: absolute;
  z-index: calc(var(--el-table-index) + 2);
}
</style>